<template>
  <el-container>
    <el-main>
      <pure-table
        ref="pureTable"
        :columns="filteredColumns"
        :query-condition="queryCondition"
        :list-api="listApi"
      >

        <template slot="header">
          <el-row>
            <pure-retrieval v-model="queryConditionTemp.keyword" class="item" placeholder="故障描述/工单号/报修电话" />
            <el-date-picker
              v-model="queryConditionTemp.createFaultTime"
              type="daterange"
              range-separator="-"
              start-placeholder="报修时间"
              end-placeholder="报修时间"
              size="mini"
              class="item"
            />
            <user-select v-model="queryConditionTemp.createUserList" placeholder="建单人" multiple collapse-tags size="mini" class="item" />
            <hospital-select v-model="queryConditionTemp.hospitalList" multiple collapse-tags placeholder="报修院区" size="mini" class="item" />
            <dic-select v-model="queryConditionTemp.degree" dic-key="obs_fault_degree" placeholder="紧急程度" size="mini" class="item" />
            <dic-select v-show="queryConditionExpand" v-model="queryConditionTemp.rangeType" dic-key="obs_fault_range" placeholder="影响范围" size="mini" class="item" />
            <dic-select v-show="queryConditionExpand" v-model="queryConditionTemp.source" dic-key="obs_fault_source" placeholder="故障来源" size="mini" class="item" />
            <el-date-picker
              v-show="queryConditionExpand"
              v-model="queryConditionTemp.createFaultTime"
              type="daterange"
              range-separator="-"
              start-placeholder="建单时间"
              end-placeholder="建单时间"
              size="mini"
              class="item"
            />
            <pure-button label="查询" size="mini" icon="search" type="minor" />
            <pure-button label="重置" size="mini" icon="reset" type="patch" />
            <pure-button :label="expandLabel" size="mini" type="text" :icon="expandIcon" icon-position="right" @click="onToggleQueryCondition" />
          </el-row>
          <el-radio-group v-model="queryCondition.currState" class="button-group" size="mini">
            <el-radio-button :label="''">全部</el-radio-button>
            <el-radio-button label="wait_accept">待接单</el-radio-button>
            <el-radio-button label="processing">处理中</el-radio-button>
            <el-radio-button label="wait_audit">待审核</el-radio-button>
            <el-radio-button label="not_pass_audit">审核未过</el-radio-button>
            <el-radio-button label="wait_appraisal">待评价</el-radio-button>
            <el-radio-button label="suspended">已暂停</el-radio-button>
            <el-radio-button label="terminated">已终止</el-radio-button>
            <el-radio-button label="ended">已完成</el-radio-button>
          </el-radio-group>
        </template>
        <template slot="indexColumn">
          序号
        </template>
        <template slot="columns" slot-scope="{row,prop}">
          <span v-if="prop==='faultRemark'" class="fault-remark" @click="onViewTicket(row.orderNum)">
            {{ row[prop] }}
          </span>
          <span v-else>
            {{ row[prop] }}
          </span>

        </template>
        <template slot="operationColumn" slot-scope="{row}">
          <pure-more-button :slice-number="3">
            <pure-button
              v-if="row['currState']==='wait_accept'"
              label="接单"
              type="text"
              @click="onAcceptTicket(row.orderNum)"
            />
            <pure-button
              v-if="row['currState']==='wait_accept'"
              label="退单"
              type="text"
              @click="onSendTicketBack(row.orderNum)"
            />
            <pure-button
              v-if="['processing','not_pass_audit'].includes(row.currState)"
              label="处理"
              type="text"
              @click="onUpdateTicket(row.orderNum, 'making')"
            />
            <pure-button
              v-if="row.currState==='suspended'"
              label="重启"
              type="text"
              @click="onOpenSuspendedTicket(row.orderNum)"
            />
            <pure-button
              label="打印"
              type="text"
            />
          </pure-more-button>

        </template>
      </pure-table>
    </el-main>
  </el-container>
</template>

<script>
import PureTable from '@/common/components/table';
import MineApi from './api';
import TicketMixin from '../mixin';
import DicSelect from '@/features/system/dataDictionary/components/dicSelect.vue';
import HospitalSelect from '@/features/system/departmentManagement/components/hospitalSelect.vue';
import UserSelect from '@/features/system/user/components/userSelect.vue';
export default {
  name: 'TicketMine',
  components: {
    PureTable,
    DicSelect,
    HospitalSelect,
    UserSelect,
  },
  mixins: [
    TicketMixin,
  ],
  data() {
    return {
      filteredColumns: [
        {
          label: '故障描述',
          prop: 'faultRemark',
        },
        {
          label: '工单号',
          prop: 'orderNum',
        },
        {
          label: '工单状态',
          prop: 'currStateToName',
        },
        {
          label: '故障分类',
          prop: 'faultTypeToName',
        },
        {
          label: '影响范围',
          prop: 'rangeTypeToName',
        },
        {
          label: '报修时间',
          prop: 'createTime',
        },
        {
          label: '报修院区/科室 ',
          prop: 'deptName',
        },
      ],
      queryCondition: {
        currState: '',
        keyword: '',
      },
      queryConditionTemp: {
        keyword: '',
        degree: null,
        rangeType: null,
        source: null,
        createFaultTime: [],
        createUserList: [],
        hospitalList: [],
      },
      listApi: MineApi.list,
      queryConditionExpand: true,
    };
  },
  computed: {
    expandLabel() {
      if (this.queryConditionExpand) {
        return '收起';
      } else {
        return '展开';
      }
    },
    expandIcon() {
      if (this.queryConditionExpand) {
        return 'arrow-up';
      } else {
        return 'arrow-down';
      }
    },
  },

  mounted() {
    this.$refs.pureTable.beforeFetchData = this.beforeFetchData;
  },
  beforeCreate() {
    console.log('父beforeCreate');
  },
  methods: {
    async beforeFetchData() {
      console.log('before');
    },
    onToggleQueryCondition() {
      this.queryConditionExpand = !this.queryConditionExpand;
      this.$nextTick(() => {
        this.$refs.pureTable.setTableMaxHeight();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/common/styles/theme/handle.scss";

.fault-remark {
  @include font_color_imp('color-primary');
  cursor: pointer;
}
.button-group {
  margin: 10px 0;
}
.item {
  width: 240px;
  margin-right: 16px;
  margin-bottom: 16px;
}
</style>
